<script lang="ts" setup>
import { computed } from 'vue'
const props = withDefaults(defineProps<{
  /** z-index **/
  zIndex?: number
}>(), {
  zIndex: 10
})

const bindStyle = computed(() => ({
  zIndex: props.zIndex
}))
</script>

<template>
  <div class="fixed-bottom" :style="bindStyle">
    <slot></slot>
  </div>
</template>

<style scoped>
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #ffffff;
  box-sizing: content-box;
  box-shadow: 0 -4px 16px 0 rgba(51, 51, 51, 0.02);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
